<template>
  <div class="official-document-header">
    <div class="search-box">
      <Input v-model="keyword"
             placeholder="请输入搜索内容"
             class="searchIpt"
             :clearable="true"
             @on-clear="search" />
      <Button type="primary"
              @click.native="search">搜索</Button>
    </div>
    <div class="action-area">
      <Button v-if="name==='发文' || name==='收文'"
              type="info"
              style="margin-right:10px"
              @click.native="download">下载{{name}}附件</Button>
      <Button type="error"
              style="margin-right:10px"
              @click.native="remove">删除{{name}}</Button>
      <Button v-if="name==='发文'"
              type="success"
              @click="add">新增发文</Button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: () => '',
    },
  },

  data() {
    return {
      keyword: '',
    };
  },

  methods: {
    download() {
      this.$emit('download');
    },

    search() {
      this.$emit('search', this.keyword);
    },

    add() {
      this.$emit('add');
    },

    remove() {
      this.$emit('remove');
    },
  },
};
</script>

<style lang="less" scope>
.official-document-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .search-box {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    .searchIpt {
      margin-right: 20px;
    }
  }

  .action-area {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
  }
}
</style>